<template>
<view class="user-order">
	<navbar title="我的订单"></navbar>
    <tabs :active="active" @change="changeShow" :config="tabsConfig">
		<tab v-for="(item, index) in order" :key="index" :title="item.name" :name="item.type">
		    <order-list v-if="item.isShow" :order-type="item.type" :ref="'order' + item.type"></order-list>
		</tab>
    </tabs>
</view>
</template>

<script>

import { orderType } from '@/utils/type';

export default {
  data() {
    return {
      active: orderType.ALL,
      order: [{
        name: '全部',
        type: orderType.ALL,
        isShow: false
      }, {
        name: '待付款',
        type: orderType.PAY,
        isShow: false
      }, {
        name: '待收货',
        type: orderType.DELIVERY,
        isShow: false
      }, {
        name: '已完成',
        type: orderType.FINISH,
        isShow: false
      }, {
        name: '已关闭',
        type: orderType.CLOSE,
        isShow: false
      }],
	  tabsConfig: {
		  itemWidth: 150, 
		  activeColor: '#366667',
		  // 下划线颜色
		  underLineColor: 'rgba(54,102,103,0.68)',
	  },
	  tabsType: '',
    };
  },

  components: {
  },
  props: {},
  onLoad: function (options) {
    // let type = options.type || orderType.ALL;
	this.tabsType = options.type || orderType.ALL;
  },
  onUnload() {
  	console.log('订单详情onUnload')
    uni.$off("orderListPayment");
  },
  onShow: function (){
	  let { order, tabsType } = this
	  let index = order.findIndex(item => item.type == tabsType)
	  this.changeShow(index);
  },
  onPullDownRefresh: function () {
   const {active, order} = this
   console.log(this.$refs['order' + order[active].type])
   this.$refs['order' + order[active].type][0].reflesh()
  },

  onReachBottom: function () {
	  const {active, order} = this
	console.log(this.$refs['order' + order[active].type])
	this.$refs['order' + order[active].type][0].getOrderListFun()
  },
  methods: {
    changeShow(index) {
		if(index != -1) {
			this.active = index
			this.order[index].isShow = true
		}
    },
  }
};
</script>
<style>

</style>